{% extends "risk/risk_base.html" %}
{% block title %}跟进分配{% endblock %}
{% block head %}
    {{ super() }}
    <link rel="stylesheet" href="{{ url_for('static', filename='css/bootstrap-table.min.css') }}">
    <link rel="stylesheet" href="{{ url_for('static', filename='css/select2.min.css') }}">
{% endblock %}
{% block page_content %}

    <h1 class="page-header">跟进分配</h1>


    <div class="modal fade" id="DispatchModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel"
         aria-hidden="true" data-backdrop="static">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
                    <h4 class="modal-title" id="myModalLabel">跟进分配</h4>
                </div>
                <div class="modal-body">
                    <form action="{{ url_for('dispatch.reset') }}" id="DispatchForm" method="post">
                        <div class="form-group">
                            <input type="hidden" id="initiator" name="initiator" value="">
                            <input type="hidden" id="flow_id" name="flow_id" value="">
                            <label for="content">指定人员</label>

                            <div class="form-inline">
                                <select id="name" name="name" class="form-control"
                                        data-name='{{ json.dumps(name_dict) }}'>
                                    <option value="" disabled selected>请选择</option>
                                    {% for name in name_dict %}
                                        <option value="{{ name }}">{{ name }}</option>
                                    {% endfor %}
                                </select>

                                <select id="staff_number" name="staff_number" class="form-control"
                                        data-staff='{{ json.dumps(staff_dict) }}'>
                                    <option value="" disabled selected>请选择</option>
                                    {% for staff_number in staff_dict %}
                                        <option value="{{ staff_number }}" >{{ staff_number }}</option>
                                    {% endfor %}
                                </select>
                            </div>

                        </div>
                        <button type="submit" class="btn btn-primary">确定</button>
                    </form>
                </div>
            </div><!-- /.modal-content -->
        </div><!-- /.modal-dialog -->
    </div>


    <div class="col-md-12">
        <div class="panel-body" style="padding-bottom:0px;">
            <!-- <ul id="myTab" class="nav nav-tabs">
                <li class="active">
                    <a href="#to_loan" data-toggle="tab">待审</a>
                </li>
                <li>
                    <a href="#rejected" data-toggle="tab">拒绝</a>
                </li>
            </ul> -->
            <div id="myTabContent" class="tab-content">
                <div class="tab-pane fade in active" id="dispatch">
                    <table id="tb_dispatch"></table>
                </div>
                <!-- <div class="tab-pane fade" id="rejected">
                    <table id="tb_rejected"></table>
                </div> -->
            </div>
        </div>
    </div>
{% endblock %}
{% block scripts %}
    {{ super() }}
    <script src="{{ url_for('static', filename='js/bootstrap-table.min.js') }}"></script>
    <script src="{{ url_for('static', filename='js/bootstrap-table-zh-CN.min.js') }}"></script>
    <script>
        $(function () {

            //初始化Table
            var tb_dispatch = new TableInit("tb_dispatch");
            tb_dispatch.Init();
        });


        var TableInit = function (table_id) {
            var oTableInit = new Object();
            var urls = new Array();
            urls['tb_dispatch'] = "/risk/dispatch/get_list?list_type=dispatch";

            //初始化Table
            table = document.getElementById(table_id);
            oTableInit.Init = function () {
                $(table).bootstrapTable({
                    url: urls[table_id],                //请求后台的URL（*）
                    method: 'get',                      //请求方式（*）
                    toolbar: '#toolbar',                //工具按钮用哪个容器
                    striped: true,                      //是否显示行间隔色
                    cache: false,                       //是否使用缓存，默认为true，所以一般情况下需要设置一下这个属性（*）
                    pagination: true,                   //是否显示分页（*）
                    sortable: false,                     //是否启用排序
                    sortOrder: "asc",                   //排序方式
                    queryParams: oTableInit.queryParams,//传递参数（*）
                    sidePagination: "server",           //分页方式：client客户端分页，server服务端分页（*）
                    pageNumber: 1,                       //初始化加载第一页，默认第一页
                    pageSize: 50,                       //每页的记录行数（*）
                    pageList: [10, 25, 50, 100],        //可供选择的每页的行数（*）
                    showColumns: true,                  //是否显示所有的列
                    showRefresh: true,                  //是否显示刷新按钮
                    minimumCountColumns: 2,             //最少允许的列数
                    clickToSelect: true,                //是否启用点击选中行
                    height: 500,                        //行高，如果没有设置height属性，表格自动根据记录条数觉得表格高度
                    uniqueId: "ID",                     //每一行的唯一标识，一般为主键列
                    cardView: false,                    //是否显示详细视图
                    detailView: false,                   //是否显示父子表
                    columns: [
                        {
                            field: 'flow_id',
                            title: 'ID',
                            align: 'center',
                        },
                        {
                            field: 'pledge_type',
                            title: '贷款类型',
                            align: 'center',
                        },
                        {
                            field: 'amount',
                            title: '金额(元)',
                            align: 'center',
                        },
                        {
                            field: 'days',
                            title: '期限(天)',
                            align: 'center',
                        },
                        {
                            field: 'area',
                            title: '申请地区',
                            align: 'center',
                        },
                        {
                            field: 'name',
                            title: '贷款人',
                            align: 'center',
                        },
                        {
                            field: 'initiator',
                            title: '跟进人',
                            align: 'center',
                        },
                        {
                            field: 'account_state',
                            title: '账户状态',
                            align: 'center',
                            formatter: function (value) {
                                if (value === '冻结') {
                                    return '<b>' + value + '</b>'
                                } else {
                                    return value
                                }
                            }
                        },
                        {
                            field: 'status',
                            title: '流程状态',
                            align: 'center',
                        },
                        {
                            field: 'operate',
                            title: '操作',
                            align: 'center',
                            // events: operateEvents,
                            formatter: operateFormatter
                        },
                    ]
                });
            };

            //得到查询的参数
            oTableInit.queryParams = function (params) {
                var temp = {   //这里的键的名字和控制器的变量名必须一直，这边改动，控制器也需要改成一样的
                    limit: params.limit,   //页面大小
                    offset: params.offset,  //页码
                    departmentname: $("#txt_search_departmentname").val(),
                    statu: $("#txt_search_statu").val()
                };
                return temp;
            };
            return oTableInit;
        };

        function operateFormatter(value, row, index) {
            if (row.status === '申请') {
                return ['<a class="" href="javascript:;" title="重新指定" onclick="reset(',
                    "'",
                    row.initiator,
                    "'",
                    ', ',
                    "'",
                    row.flow_id,
                    "'",
                    ')">跟进分配</a>',
                ].join("");
            } else {
                console.log(row.initiator);
                console.log(row.flow_id);
                return ['<a class="" href="javascript:;" title="重新指定" onclick="reset(',
                    "'",
                    row.initiator,
                    "'",
                    ', ',
                    "'",
                    row.flow_id,
                    "'",
                    ')">修改跟进人</a>',
                ].join("");
            }


        };

        var reset = function (initiator, flow_id) {
            $("#initiator").val(initiator);
            $("#flow_id").val(flow_id);

            $("#DispatchModal").modal();
        }

        $("#name").on('change click', function () {
            var name_dict = $(this).data('name');
            var value = $(this).val();
            var staff_number = name_dict[value];
            $("#staff_number").val(staff_number);
        })

        $("#staff_number").on('change', function () {
            var staff_dict = $(this).data('staff');
            var name = staff_dict[$(this).val()];
            $("#name").val(name);
        })

    </script>
    <script>
        nav = document.getElementById("nav_dispatch");
        nav.setAttribute("class", "active");


    </script>
{% endblock %}
